<!-- templates/agricultural_product_list.html -->
{% extends 'base.html' %}
{% load static %}
{% block content %}

<style>
    .table th, .table td {
        vertical-align: middle;
    }

    /* 新增状态标签样式 */
    .status-badge {
        padding: 0.4em 0.7em;
        font-size: 0.85rem;
        border-radius: 0.25rem;
    }

    .price-tag {
        color: #28a745;
        font-weight: bold;
    }
</style>

<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-16">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">📦 已上架农产品信息</h5>
                </div>
                <div class="card-body">

                    <!-- 搜索表单 -->
                    <form method="get" action="{% url 'agricultural_product_list' %}" class="mb-4">
                        <div class="input-group">
                            <input type="text" name="q" value="{{ query }}" class="form-control" placeholder="请输入商品名称、原材料来源或检验批次进行搜索...">
                            <button class="btn btn-outline-secondary" type="submit">搜索</button>
                        </div>
                    </form>
                    {% if products %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead>
                            <tr>
                                <th scope="col">商品名称</th>
                                <th scope="col">原材料来源</th>
                                <th scope="col">生产过程</th>
                                <th scope="col">检验批次</th>
                                <th scope="col">图片预览</th>
                                <th scope="col">价格</th> <!-- 新增列 -->
                                <th scope="col">录入时间</th> <!-- 新增列 -->
                                <th scope="col">状态</th> <!-- 新增列 -->

                                <!-- 仅对管理员显示加密相关列 -->
                                {% if request.user.is_admin %}
                                <th scope="col">是否加密</th>
                                <th scope="col">解密</th>
                                {% endif %}
                                {% if request.user.is_admin or request.user.is_producer %}
                                <th scope="col">操作</th>
                                {% endif %}
                            </tr>
                            </thead>

                            <tbody>
                            {% for product in products %}
                            <tr>
                                <td>{{ product.product_name }}</td>
                                <td>{{ product.raw_material_source|truncatechars:30 }}</td>
                                <td>{{ product.production_process|truncatechars:30 }}</td>
                                <td>{{ product.inspection_batch }}</td>

                                <!-- 图片列 -->
                                <td>
                                    {% if product.product_image %}
                                    <a href="{{ product.product_image.url }}" data-lightbox="product-{{ product.id }}"
                                       data-title="产品图片">
                                        <img src="{{ product.product_image.url }}" alt="产品图片"
                                             style="max-width: 100px; max-height: 100px;">
                                    </a>
                                    {% else %}
                                    <span class="text-muted">无图片</span>
                                    {% endif %}
                                </td>

                                <!-- 价格列 -->
                                <td>
                                    <span class="price-tag">{{ product.price|floatformat:2 }} 元</span>
                                </td>

                                <!-- 录入时间 -->
                                <td>
                                    {{ product.created_at|date:"Y-m-d H:i" }}
                                </td>

                                <!-- 状态 -->
                                <td>
                                    {% if product.is_listed %}
                                        <span class="status-badge bg-success text-white">已上架</span>
                                    {% elif product.is_sold %}
                                        <span class="status-badge bg-dark text-white">已售出</span>
                                    {% else %}
                                        <span class="status-badge bg-secondary text-white">已下架</span>
                                    {% endif %}
                                </td>

                                <!-- 仅对管理员显示加密相关列 -->
                                {% if request.user.is_admin %}
                                <!-- 加密状态 -->
                                <td>
                                    {% if product.is_encrypted %}
                                    <span class="badge bg-success">已加密</span>
                                    {% else %}
                                    <span class="badge bg-danger">未加密</span>
                                    {% endif %}
                                </td>

                                <!-- 解密列 -->
                                <td>
                                    {% if product.is_encrypted %}
                                        <a href="{% url 'decrypt_agricultural_data' product.id %}" class="btn btn-success btn-sm">解密</a>
                                    {% else %}
                                        <button class="btn btn-secondary btn-sm" disabled>无数据</button>
                                    {% endif %}
                                </td>
                                {% endif %}

                                <!-- 操作按钮 -->
                                <td>
                                    <div class="d-flex flex-wrap gap-2">
                                        <!-- 上架/下架按钮 -->
                                        {% if request.user.is_admin or request.user.is_producer %}
                                            {% if product.is_listed %}
                                                <button type="button" class="btn btn-warning btn-sm"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#unlistProductModal"
                                                        data-product-id="{{ product.id }}"
                                                        data-product-name="{{ product.raw_material_source }}">
                                                    下架
                                                </button>
                                            {% else %}
                                                <button type="button" class="btn btn-info btn-sm"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#listProductModal"
                                                        data-product-id="{{ product.id }}"
                                                        data-product-name="{{ product.raw_material_source }}">
                                                    上架
                                                </button>
                                            {% endif %}
                                        {% endif %}
                                              <!-- 编辑按钮 -->
        {% if request.user.is_admin or request.user.is_producer  %}
            <a href="{% url 'edit_agricultural_product' product.id %}" class="btn btn-primary btn-sm">编辑</a>
        {% endif %}
                                        <!-- 删除按钮 -->
{% if request.user.is_admin or request.user.is_producer %}
    <button type="button" class="btn btn-danger btn-sm"
            data-bs-toggle="modal"
            data-bs-target="#deleteProductModal"
            data-product-id="{{ product.id }}"
            data-product-name="{{ product.product_name }}">
        删除
    </button>
{% endif %}

                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                            </tbody>

                        </table>
                    </div>

                    <!-- 分页导航 -->
<nav aria-label="Page navigation" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?q={{ query }}&page=1">&laquo;</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?q={{ query }}&page={{ page_obj.previous_page_number }}">前一页</a>
        </li>
        {% endif %}

        {% for i in page_obj.paginator.page_range %}
        <li class="page-item {% if page_obj.number == i %}active{% endif %}">
            <a class="page-link" href="?q={{ query }}&page={{ i }}">{{ i }}</a>
        </li>
        {% endfor %}

        {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?q={{ query }}&page={{ page_obj.next_page_number }}">下一页</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?q={{ query }}&page={{ page_obj.paginator.num_pages }}">&raquo;</a>
        </li>
        {% endif %}
    </ul>
</nav>


                    {% else %}
                    <p class="text-muted text-center my-3">暂无录入记录。</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>



<!-- 仅对管理员显示模态框 -->
{% if request.user.is_admin or request.user.is_producer %}
<!-- 上架确认模态框 -->
<div class="modal fade" id="listProductModal" tabindex="-1" aria-labelledby="listProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="listProductModalLabel">确认上架</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>您确定要将以下商品上架吗？</p>
                <p><strong>商品：</strong><span id="modal-list-product-name"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <a id="confirm-list-btn" class="btn btn-info text-white">确认上架</a>
            </div>
        </div>
    </div>
</div>

<!-- 下架确认模态框 -->
<div class="modal fade" id="unlistProductModal" tabindex="-1" aria-labelledby="unlistProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="unlistProductModalLabel">确认下架</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>您确定要将以下商品下架吗？</p>
                <p><strong>商品：</strong><span id="modal-unlist-product-name"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <a id="confirm-unlist-btn" class="btn btn-warning">确认下架</a>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // 处理上架按钮
    var listProductModal = document.getElementById('listProductModal');
    listProductModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var productId = button.getAttribute('data-product-id');
        var productName = button.getAttribute('data-product-name');

        var modalBody = listProductModal.querySelector('.modal-body');
        modalBody.querySelector('#modal-list-product-name').textContent = productName;

        var confirmBtn = listProductModal.querySelector('#confirm-list-btn');
        confirmBtn.href = "{% url 'toggle_product_listing' 0 %}".replace("0", productId);
    });

    // 处理下架按钮
    var unlistProductModal = document.getElementById('unlistProductModal');
    unlistProductModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var productId = button.getAttribute('data-product-id');
        var productName = button.getAttribute('data-product-name');

        var modalBody = unlistProductModal.querySelector('.modal-body');
        modalBody.querySelector('#modal-unlist-product-name').textContent = productName;

        var confirmBtn = unlistProductModal.querySelector('#confirm-unlist-btn');
        confirmBtn.href = "{% url 'toggle_product_listing' 0 %}?action=unlist".replace("0", productId);
    });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // 处理删除按钮
    var deleteProductModal = document.getElementById('deleteProductModal');
    deleteProductModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var productId = button.getAttribute('data-product-id');
        var productName = button.getAttribute('data-product-name');

        var modalBody = deleteProductModal.querySelector('.modal-body');
        modalBody.querySelector('#modal-delete-product-name').textContent = productName;

        var confirmBtn = deleteProductModal.querySelector('#confirm-delete-btn');
        confirmBtn.href = "{% url 'delete_agricultural_product' 0 %}".replace("0", productId);
    });
});
</script>


<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteProductModal" tabindex="-1" aria-labelledby="deleteProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="deleteProductModalLabel">⚠️ 确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>您确定要删除以下商品吗？此操作不可恢复！</p>
                <p><strong>商品名称：</strong><span id="modal-delete-product-name" class="text-danger"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <a id="confirm-delete-btn" class="btn btn-danger">确认删除</a>
            </div>
        </div>
    </div>
</div>
{% endif %}  <!-- 结束管理员专属内容 -->

{% endblock %}
